<template>
	<view class="list-item"  :class="[{ startClass: flexStart },{boderBottom:showBorderBottom}]">
		<view class="left">
			<text>{{leftName}}</text>
		</view>
		<view class="center">
			<slot name="center"></slot>
		</view>
		<view class="right" v-if="showRight">
			<slot name="right"></slot>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				checked:false,
				
			}
		},
		props:{
			flexStart:{
				type:Boolean,
				default:false
			},
			showBorderBottom:{
				type:Boolean,
				default:false
			},
			showRight:{
				type:Boolean,
				default:false
			},
			leftName:{
				type:String,
				default:''
			},
			list:{
				type:Object,
				default:()=>{}
			}
		},
		mounted() {
			// console.log(this.list)
		}
	}
</script>

<style lang="scss" scoped>
	.report_repair{
		width: 100vw;
		height: 100vh;
		background-color: #f2f2f2;
	}
	.list-item{
		min-height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.left{
			margin-left: 30rpx;
			padding: 30rpx 0;
			text{
				font-size: 28rpx;
				font-weight: bold;
			}
			
			
		}
		.right{
			margin-right: 30rpx;
		}
		.center{
			flex:1
		}
	}
	.startClass{
		align-items:flex-start;
	}
	.boderBottom{
		border-bottom: 1px solid #e9e9e9;
	}
</style>

